import Taro, { Component } from '@tarojs/taro'
import { View , Text , Image} from '@tarojs/components';
import { baseImgSrc } from '../../util/base_url';
import { AtMessage } from 'taro-ui';
import { addOftenAddress, getOnlyAddress , deleteOftenAddress , getUpHide} from '../../util/api';
import './oftenaddressadd.scss';
export default class OftenAddress extends Component {
    constructor(){
        super(...arguments)
        this.state = {
            id:0,
            model:"add",
            startAddress:{
                address:"",
                latitude:undefined,
                longitude:undefined,
            },
            endAddress:{
                address:"",
                latitude:undefined,
                longitude:undefined,
            },
            isUp:0,
        }
    }
    componentWillMount(){
        let { model = 'add' , id = 0 } = this.$router.params;
        this.setState({model,id});
        if(model == 'edit'){
            getOnlyAddress({id}).then( res => {
                if(res.code == 0){
                    this.setState({
                        startAddress:{
                            address:res.data.address,
                            latitude:res.data.lat,
                            longitude:res.data.lon,
                        },
                        endAddress:{
                            address:res.data.go_address,
                            latitude:res.data.go_lat,
                            longitude:res.data.go_lon,
                        }
                    })
                }
            })
        }
        getUpHide({},true).then( res => {
            if(res.code == 0){
                this.setState({
                    isUp:res.close,
                })
            }
        })
    }
    selectAddress(iden){
        let { startAddress , endAddress , isUp } = this.state;
        let _this = this;
        if(iden == 1 ){ //开始地址
            wx.chooseLocation({
                latitude:startAddress.latitude,
                longitude:startAddress.longitude,
                success(res){
                    if(res.address.indexOf('北京') == -1 && isUp == 1){
                        wx.showToast({title:"目前只开通了北京地区，敬请期待！",icon:"none"})
                        return false
                    }
                    _this.setState({startAddress:{
                        address:res.name,
                        latitude:res.latitude,
                        longitude:res.longitude,
                    }})
                }
            })
        }else{
            wx.chooseLocation({
                latitude:endAddress.latitude || startAddress.latitude,
                longitude:endAddress.longitude || startAddress.longitude,
                success(res){
                    if(res.address.indexOf('北京') == -1 && isUp == 1){
                        wx.showToast({title:"目前只开通了北京地区，敬请期待！",icon:"none"})
                        return false
                    }
                    _this.setState({endAddress:{
                        address:res.name,
                        latitude:res.latitude,
                        longitude:res.longitude,
                    }})
                } 
            })
        }
    }
    submitData(){
        let { startAddress , endAddress , id } = this.state;
        if(startAddress.address == ''){
            Taro.AtMessage({
                message:"请选择出发地",
                type:'error'
            })
           return false
        }
        if(endAddress.address == ''){
            Taro.AtMessage({
                message:"请选择目的地",
                type:'error'
            })
           return false
        }
        addOftenAddress({
            lat:startAddress.latitude,
            lon:startAddress.longitude,
            address:startAddress.address,
            go_lat:endAddress.latitude,
            go_lon:endAddress.longitude,
            go_address:endAddress.address,
            id:id,
        }).then( ress => {
            Taro.showModal({
                title:"提示",
                content:ress.msg
            }).then( res => {
                ress.code == 0 ? Taro.navigateBack() : "";
            })
        })
    } 
    deleteAddress(){
        let { id } = this.state;
        Taro.showModal({
            title:"提示",
            content:"确定要删除吗"
        }).then( res => {
            if(res.confirm){
                deleteOftenAddress({id}).then( res => {
                    if(res.code == 0){
                        Taro.navigateBack()
                    }else{
                        Taro.showToast({title:res.msg,icon:"none"})
                    }
                })
            }
        })
    }
    render(){
        let { model , startAddress , endAddress } = this.state;
        return(
            <View className='oftenaddress'>
                <View className='oa-item'>
                    <View className='left-it flex align-items flex-start' onClick={this.selectAddress.bind(this,1)}>
                        <Image className='it-image' src={`${baseImgSrc}/address_fa.png`} />
                        {
                            startAddress.address == '' ? 
                              <Text className='it-txt ell1 flex1 '>请输入出发地</Text>  :
                                <Text className='it-txt ell1 flex1 active'>{startAddress.address}</Text>
                        }
                    </View>
                    <View className='left-it flex align-items flex-start' onClick={this.selectAddress.bind(this,2)}>
                        <Image className='it-image' src={`${baseImgSrc}/address_dao.png`} />
                        {
                            endAddress.address == '' ? 
                              <Text className='it-txt ell1 flex1 '>请输入目的地</Text>  :
                                <Text className='it-txt ell1 flex1 active'>{endAddress.address}</Text>
                        }
                    </View>
                </View>
                {
                   model == 'add' ? '' :  <View className='delete-btn fn-ctr' onClick={this.deleteAddress.bind(this)}>删除地址</View>
                }
                <View className='add-btn fn-ctr' onClick={this.submitData.bind(this)}>
                    {
                        model == 'add' ?  <Text className='add-txt'>确认添加</Text> :  <Text className='add-txt'>保存修改</Text>
                    }
                   
                </View>
                <AtMessage />
            </View>
        )
    }
}